<template>
    <div class="publicityDetail ">
        <breadcrumb :routes="routes"></breadcrumb>
        <div class="dev-width">
            <div class="title">{{publicity.name}}</div>
            <Row class="sub_title">
                <Col :span="6">
                <span class="strong">公示编号:</span>
                {{publicity.no}}
                </Col>
                <Col :span="6">
                <span class="strong">公示开始日期:</span>
                {{publicity.startAt}}
                </Col>
                <Col :span="6">
                <span class="strong"> 剩余天数:</span>
                {{publicity.remaining}}
                </Col>
                <Col :span="6">
                <span class="strong"> 公示结束日期：</span>
                {{publicity.endIn}}
                </Col>
            </Row>
            <div class="shuoming">
                根据《中华人民共和国促进科技成果转化法》、《实施 &lt;中华人民共和国促进科技成果转化发法&gt;若干规定》等有关规定。受
                <b>{{publicity.assignor}}</b> 委托，将其拟交易项目进行公示。公示具体内容如下：
            </div>
            <div class="content">
                <div class="title">{{publicity.name}}</div>
                <Row>
                    <Col :span="6" :offset="4">
                    <span class="strong">转让方：</span>
                    <span>
                        {{publicity.assignor}}
                    </span>
                    </Col>
                    <Col :span="6" :offset="4">
                    <span>
                        <span class="strong">拟交易价格：</span>
                        <span class="price">{{publicity.price}}</span>万
                    </span>
                    </Col>
                </Row>
                <Row>
                    <Col :span="6" :offset="4">
                    <span class="strong">项目类型：</span>
                    <span>{{getPublicityType(publicity.type)}}</span>
                    </Col>
                    <Col :span="6" :offset="4">
                    <span class="strong">交易方式：</span>
                    <span>{{getTranferMode(publicity.transactionMode)}}</span>
                    </Col>
                </Row>
                <Row>
                    <Col :span="16" :offset="4" class="remark">
                    <span class="strong">备注:</span>
                    {{publicity.remark}}
                    </Col>
                </Row>
                <Row v-if="publicity.status=='03'">
                    <Col :span="24" class="remark" style="text-align:center">
                    <Button type="primary" @click="showObjection">我有异议</Button>
                    </Col>
                </Row>
            </div>
        </div>

        <Modal class="confirm-dialog" v-model="loginVisible" width="360">
            <p slot="header" style="color:#f60;text-align:center">
            </p>
            <div style="text-align:center">
                <p> 抱歉，您没有登录无权访问该页面!</p>
                <nuxt-link :to="{path:'/login',query:{
                  callback:''
                }}" class="h_l">立即登录
                </nuxt-link>
            </div>
            <div slot="footer">
            </div>
        </Modal>
        <Modal class="confirm-dialog" v-model="realNameVisible" width="360">
            <p slot="header" style="color:#f60;text-align:center">
            </p>
            <div style="text-align:center">
                <p> 抱歉，您没有实名认证无权访问该页面!</p>
            </div>
            <div slot="footer">
                <Button class="long" @click="operateClick">立即实名认证</Button>
            </div>
        </Modal>
        <Modal class="confirm-dialog" v-model="dialogVisible" title="我的异议">
            <Form class="p20" ref="objectionForm" :model="objectionForm" :rules="rules">
                <FormItem prop="content">
                    <Input v-model="objectionForm.content" type="textarea" :rows="3"></Input>
                </FormItem>
            </Form>
            <div slot='footer'>
                <Button @click='dialogVisible=false'>取消</Button>
                <Button @click='raiseObjection'>确认</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
import portal from "~/net/portal"
import breadcrumb from '~/components/Breadcrumb'
import { requiredInput } from "~/constant/validform"
import { mapState } from 'vuex'
import config from "~/config"

export default {
    name: "publicityDetail",
    data() {
        return {
            dialogVisible: false,
            loginVisible: false,
            realNameVisible: false,
            objectionForm: {
                content: ''
            },
            rules: {
                content: requiredInput('内容必须输入')
            },
            businessBrowserUrl: config.businessBrowserUrl
        }
    },
    components: {
        breadcrumb
    },
    computed: {
        ...mapState(['user', 'identities']),
        routes() {
            return [
                { name: '首页', path: '/' },
                { name: '公示', path: '/publicity' },
                { name: '详情' }
            ]
        }
    },
    asyncData({ params, error, req }) {
        return portal.getPublicityDetail({
            query: { id: params["id"] },
            client: req
        }).then(res => {
            return {
                publicity: res.data
            }
        }).catch(e => {
            error({ statusCode: 404, messsage: '公示不存在' })
        })
    },
    methods: {
        getPublicityType(type) {
            if (type == "01") {
                return "专利"
            }
            else
                return "技术成果"
        },
        getTranferMode(mode) {
            if (mode == "00") {
                return "融资"
            }
            else if (mode == "01") {
                return "技术转让"
            }
            else if (mode == "02") {
                return "技术许可"
            }
            else if (mode == "03") {
                return "合作开发"
            }
        },
        showObjection() {
            if (this.user == null) {
                this.loginVisible = true
                return;
            }
            else if (this.user.userStatus != 2 && this.user.userStatus != 5) {
                this.realNameVisible = true;
                return;
            }
            else {
                this.dialogVisible = true
                this.objectionForm.content = ''
            }
        },
        operateClick() {
            window.location.href = this.businessBrowserUrl + '/realname';
        },
        raiseObjection() {
            this.$refs.objectionForm.validate(valid => {
                if (valid) {
                    portal.raiseObjections({
                        query: {
                            id: this.publicity.id,
                            content: this.objectionForm.content
                        }
                    }).then(res => {
                        if (res.code == "0000") {
                            this.$Message.success('提交成功,请等待平台反馈')
                            this.dialogVisible = false
                        }
                    }).catch(_ => {
                        this.dialogVisible = false
                    })
                }
            })
        }
    }
}
</script>
<style lang="less">
.publicityDetail {
  .title {
    font-weight: 800;
    text-align: center;
    font-size: 23px;
    line-height: 60px;
  }
  .sub_title {
    text-align: center;
    color: black;
  }
  .strong {
    letter-spacing: 1px;
    color: #8b93aa;
  }
  .shuoming {
    padding: 8px;
    margin: 10px 0;
    background: #fdfdfd;
    border: 1px solid #dddee1;
    font-size: 14px;
    b {
      text-decoration: underline;
    }
  }
  .content {
    margin: 15px;
    background: #f8f8f9;
    border: 6px solid #e5eef2;
    .title {
      font-weight: 800;
      font-size: 20px;
      line-height: 80px;
    }
    .ivu-row {
      text-align: center;
      line-height: 25px;
      margin-bottom: 20px;
      .ivu-col {
        border-bottom: 1px solid #ccc;
        text-align: left;
        &.remark {
          margin-top: 10px;
          border-bottom: none;
          line-height: 23px;
        }
        .price {
          color: red;
          font-size: 23px;
          border-bottom: 0;
          width: 120px;
        }
      }
    }

    .ivu-button {
      margin: 20px auto;
      text-align: center;
      border-bottom: none;
    }
  }
}
</style>